<%@ page contentType="text/html;charset=UTF-8" language="java" import="java.util.*,java.sql.*,com.*"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>新闻列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="css/xadmin.css">
     <link rel="stylesheet" href="ui/layui/css/layui.css">
     <script src="ui/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="js/xadmin.js"></script>
</head>
<body>
<script>
    layui.use('form', function(){
  var form = layui.form;
});
</script>
<% if ("0".equals(request.getParameter("message"))) { %>
    <script>alert("新闻修改成功！");</script>
<% } %>
<%
GetNewsList gnl = new GetNewsList();
ArrayList<News> newsList = new ArrayList<News>();
newsList = gnl.getList();
request.setAttribute("newsList", newsList);
%>
<script>
var newsList = [];

<c:forEach items="${newsList}" var="n">
    var obj = {
        id: "${n.id}",
        title: "${n.title}",
        content: "${n.content}",
        image: "${n.image}",
        author: "${n.author}",
        type: "${n.type}",
        keywords: "${n.keywords}",
        pubtime: "${n.pubtime}"
    };
    newsList.push(obj); // 将当前对象添加到数组中
</c:forEach>
</script>
<div class="x-nav">
<span class="layui-breadcrumb">
<a href="">新闻管理</a>
<a href="">新闻列表</a>
<a>
<cite>所有新闻</cite>
</a>
</span>
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" onclick="location.reload()" title="刷新">
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
</a>
</div>

<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
 <div class="layui-card-body ">
                   <form id="title-search" class="layui-form layui-col-space5">
    <div class="layui-inline layui-show-xs-block">
        <select name="level" id="search-level">
            <option value="国内新闻">国内新闻</option>
	<option value="国际新闻">国际新闻</option>
	<option value="娱乐新闻">娱乐新闻</option>
	<option value="体育新闻">体育新闻</option>
	<option value="军事新闻">军事新闻</option>
        </select>
    </div>
    <div class="layui-inline layui-show-xs-block">
        <input type="text" name="title" placeholder="请输入标题" autocomplete="off" class="layui-input" value=""/>
    </div>
    <div class="layui-inline layui-show-xs-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo" id="search-btn"><i class="layui-icon">&#xe615;</i></button>
    </div>
</form>
    </div>
 <div class="layui-card-header">
                <button class="layui-btn" onclick="xadmin.open('添加新闻','addnew.jsp',1200,600)">
                    <i class="layui-icon"></i>添加
                </button>
            </div>

            <div class="layui-card-body layui-table-body layui-table-main" id="newsTableBody">
                <table class="layui-table layui-form">
                    <thead>
                        <tr>
                            <th>新闻编号</th>
                            <th>新闻标题</th>
                            <th>新闻类型</th>
                            <th>作者</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- 使用JSTL标签库中的forEach循环生成表格的每一行 -->
                        <c:forEach items="${newsList}" var="n" varStatus="index">
                            <tr>
                                <td>${n.id}</td>
                                <td>${n.title}</td>
                                <td>${n.type}</td>
                                <td>${n.author}</td>
                                <td>
                                    <button class="layui-btn layui-btn-sm layui-btn-normal" onclick="location.href='updnew.jsp?id=${n.id}'">修改</button>
                                </td>
                            </tr>
                        </c:forEach>
                    </tbody>
                </table>
            </div>
            <div class="layui-card-body ">
    <div class="page" id="pageButtons">
    </div>
</div>
        </div>
    </div>
</div>
 </div>
</body>
<script>
// 获取表单元素和表格元素
var form = document.querySelector('form');
var table = document.querySelector('table');

// 监听表单提交事件
form.addEventListener('submit', function(event) {
  event.preventDefault();   // 阻止表单默认提交行为
  var levelSelect = this.elements.level;
  var titleInput = this.elements.title;
  var levelValue = levelSelect.value;
  var titleValue = titleInput.value;

  // 遍历表格中的每一行，满足条件则显示，否则隐藏
  Array.from(table.querySelectorAll('tbody tr')).forEach(function(tr) {
    if ((levelValue === '' || tr.cells[2].textContent === levelValue) &&
        (titleValue === '' || tr.cells[1].textContent.includes(titleValue))) {
      tr.style.display = '';
    } else {
      tr.style.display = 'none';
    }
  });
});
</script>
<script>
var tableBody = document.getElementById("newsTableBody");
var pageButtons = document.getElementById("pageButtons");
var pageSize = 8;
var currentPage = 1;

function generatePageButtons() {
    var rows = tableBody.querySelectorAll("tbody > tr");
    var totalPage = Math.ceil(rows.length / pageSize);
    var html = "";
    for (var i = 1; i <= totalPage; i++) {
        html += "<a class='pageButton' href='javascript:void(0)' onclick='gotoPage("+i+")'>"+i+"</a>";
    }
    pageButtons.innerHTML = html;
}

function gotoPage(pageNumber) {
    currentPage = pageNumber;
    var rows = tableBody.querySelectorAll("tbody > tr");
    for (var i = 0; i < rows.length; i++) {
        if (i >= (currentPage-1)*pageSize && i < currentPage*pageSize) {
            rows[i].style.display = "table-row";
        } else {
            rows[i].style.display = "none";
        }
    }
    var buttons = pageButtons.querySelectorAll(".pageButton");
    for (var i = 0; i < buttons.length; i++) {
        if (i == (currentPage - 1)) {
            buttons[i].classList.add("current");
        } else {
            buttons[i].classList.remove("current");
        }
    }
}

generatePageButtons();
gotoPage(currentPage);
</script>
</html>
